<template>
  <div class="undo-item h100">
    <dividerTitle :title="componentTitle">
      <span>
        <span @click="getUndoData()" class="more-btn refresh"
          >刷新<i class="el-icon-refresh"></i
        ></span>
        <span @click="openMore()" class="more-btn"
          >更多<i class="el-icon-arrow-right"></i
        ></span>
      </span>
    </dividerTitle>
    <div class="workList">
      <ul class="no-data" v-if="!liArr.length">
        暂无数据
      </ul>
      <ul class="ul-style">
        <template>
          <el-divider v-if="liArr.length > 0"></el-divider>
          <li v-for="(item, index) in liArr" :key="index">
            <div class="line-content" @click="goDetailPage(item)">
              <div class="line-center">
                <span class="item-code">[{{ item.moduleName }}]</span>
                <span class="item-title">
                  【{{ item.processName }}】 {{ item.title || item.name }}</span
                >
              </div>
            </div>
            <el-divider></el-divider>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import { getUpComingList } from "@/api/orderManagement/upComingCenter.js";
export default {
  props: ["componentTitle"],
  data() {
    return {
      totalNums: 0,
      undoList: [],
      liArr: [],
    };
  },
  created() {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getUndoData();
    },
    getUndoData() {
      let queryData = {
        page: 1,
        pageSize: 6,
      };
      getUpComingList(queryData)
        .then((res) => {
          this.liArr = res.data.list;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    openMore() {
      let { href } = this.$router.resolve({
        path: "/upComingCenter/upComing",
      });
      window.open(href, "_blank");
    },
    //跳转到详情页
    goDetailPage(row) {
      let router = null;
      let vehicleState = "";
      let vehicleStatus = "";
      if (row.moduleCode == "car") {
        switch (row.processCode) {
          case "part_time_driver_apply": //兼职司机申请
            router = "partTimeCertificationDetails";
            vehicleState = "wait_approve";
            vehicleStatus = "待审批";
            break;
          case "car_apply": //用车申请
            router = "applyVehicleDetails";
            vehicleState = "WAIT_REVIEW";
            vehicleStatus = "待审核";
            break;
          case "car_maintain": //车辆维修保养
            router = "vehicleRepairDetails"; //车辆维修
            vehicleState = "WAIT_REVIEW";
            vehicleStatus = "待审核";
            break;
          case "car_delimit_apply": //车辆定编申请
            router = "vehicleEstablishmentDetails";
            vehicleState = "WAIT_REVIEW";
            vehicleStatus = "待审核";
            break;
          case "car_delimit_replace": //车辆更购
            router = "vehicleReplaceDetails";
            vehicleState = "wait_approve";
            vehicleStatus = "待审核";
            break;
          default:
            break;
        }
        const { href } = this.$router.resolve({
          name: router,
          query: {
            id: row.dataId,
            pageType: "edit",
            //vehicleState:vehicleState,
            //vehicleStatus :vehicleStatus
          },
        });
        window.open(href, "_blank");
      } else {
        if (
          [
            "ticket_work_status_linesecond",
            "ticket_work_status_linefirst",
          ].includes(row.processCode)
        ) {
          row.processCode = "ticket_work_status_linefirst";
        }
        router = this.$store.getters.fineDirtDataName(
          "module_code",
          row.processCode
        );
        if (row.processCode == router) {
          this.$message("请前往移动端查看此待办！");
        } else {
          //let path = router.split("?")[0];
          const { href } = this.$router.resolve({
            name: router,
            query: {
              id: row ? row.dataId : "",
              val: row ? row.dataId : "",
              pageType: "edit",
            },
          });
          window.open(href, "_blank");
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.undo-item {
  height: 100%;
  width: 100%;
  .workList {
    height: 100%;
    overflow-y: auto;
    /deep/.el-divider {
      background-color: #efefef !important;
    }
  }
  /deep/.el-divider--horizontal {
    margin: 11px 0;
    &:first-child {
      margin: 0 0 11px 0;
    }
  }
  .ul-style {
    margin: 0 20px;
  }
  .line-content {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    .line-left {
      width: 60px;
      width: 12%;
      line-height: 28px;
      height: 28px;
      border-radius: 14px;
      text-align: center;
    }
    .line-center {
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 16px;
      .item-code {
        color: #0d60b4;
        font-weight: 550;
      }
      .item-title {
        color: #666666;
        cursor: pointer;
      }
      .item-title:hover {
        color: #0d60b4;
      }
    }
    .line-right {
      text-align: right;
      width: 12%;
      font-size: 14px;
      cursor: pointer;
      .focus {
        color: #666666;
        &:hover {
          color: #999999;
        }
      }
    }
  }
}
/deep/.el-col-6 {
  width: calc(25% - 15px);
}
.no-data {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #a7a7a7;
}
.more-btn {
  font-size: 14px;
  color: #999999;
  &:hover {
    cursor: pointer;
    color: #0d60b4;
  }
}
.refresh {
  margin-right:10px;
}
</style>